<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>测试</title>
</head>

<body>
  <h2>测试用网页</h2>
  <button>测试事件</button>
  <button id="pickerPhoto">相册服务 mk.pickerPhoto</button>
  <button id="pickerCamera">拍照服务 mk.pickerCamera</button>
  <button id="vibrator">传感器 mk.vibrator</button>
  <button id="getAreaColumns">省市区数据 mk.getAreaColumns</button>
  <br /><br />
  <img style="width: 100px" src="" alt="" />
  <p></p>
  <script>
    document.querySelector("button").addEventListener("click", async () => {
      // mk.sayHi("翻滚吧牛宝宝");
      console.log('mk对象',window.mk)
      // 查询用户信息，并写道p标签中
      const userInfo = mk.queryUser();
      document.querySelector("p").innerText = JSON.stringify(userInfo)

      // mk.removeUser();
    });

    // 监听相册服务mk.pickerPhoto
    const pickerPhoto = document.querySelector("#pickerPhoto")
    pickerPhoto.addEventListener("click",async ()=>{
      const str = await mk.pickerPhoto()
      console.log(str)
       // 显示 base64 图片,需要添加前缀标识，否者图片无法展示
       document.querySelector("img").src = `data:image/jpeg;base64,${str}`;
    })

    // 监听拍照服务mk.pickerCamera
    const pickerCamera = document.querySelector("#pickerCamera")
    pickerCamera.addEventListener("click",async ()=>{
      const str = await mk.pickerCamera()
      console.log(str)
       // 显示 base64 图片,需要添加前缀标识，否者图片无法展示
       document.querySelector("img").src = `data:image/jpeg;base64,${str}`;
    })

    
      // 传感器 mk.vibrator
      const vibrator = document.querySelector("#vibrator");
      vibrator.addEventListener("click", async () => {
        mk.vibrator();
      });

      const getAreaColumns = document.querySelector("#getAreaColumns");
      getAreaColumns.addEventListener("click", async () => {
        const data = await mk.getAreaColumns();
        console.log(data);
      });
  </script>
  <!-- 引入调试控制台 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/eruda/3.3.0/eruda.min.js"></script>
  <script>eruda.init();</script>

</body>

</html>